<template>
  <!-- 区域管理 -->
  <!-- 基础资料-小区管理页面 -->
  <div class="areaManger">
    <el-row :gutter="24" style="background: #fff; height:64px;margin:0;">
      <el-col :span="18" style="position:relative;top:10px;left:15px;">
        <searchComponentsCss :searchData="searchRegionalData" :optionsZi="optionsZi" :searchOptionTable="searchOptionTable" :shrinkBoxOpenClose='shrinkBoxOpenClose' @searchCallBack="searchCallBack"></searchComponentsCss>
      </el-col>
      <el-col :span="6">
        <rightButtons class="right_buttons" @sunS_F='sunS_F' @emptySearch='emptySearch' @configuration='configuration' @goFatherComponent="goFatherComponent" :configurationData="searchData" :btn-switch-configuration="false"></rightButtons>
      </el-col>
    </el-row>
    <div class="line"></div>
    <el-row>
      <!-- 左边表格 -->
      <el-col :span="rightContent?13:24" class="leftContent">
        <el-container>
          <el-main>
            <!-- 点击侧边框 -->
            <!-- <el-row :gutter="24" style="background: #fff; height:64px;margin:0;">
              <el-col :span="18" style="position:relative;bottom:10px;">
                <searchComponentsCss :searchData="searchRegionalData" :optionsZi="optionsZi" :searchOptionTable="searchOptionTable" :shrinkBoxOpenClose='shrinkBoxOpenClose' @searchCallBack="searchCallBack"></searchComponentsCss>
              </el-col>
              <el-col :span="6" style="padding: 19px 0 0 12px;">
                <rightButtons class="right_buttons" @sunS_F='sunS_F' @emptySearch='emptySearch' @configuration='configuration' @goFatherComponent="goFatherComponent" :configurationData="searchRegionalData" :btn-switch-configuration="false"></rightButtons>
              </el-col>
            </el-row> -->
            <el-button type="primary" class="rightIcon" v-show="rightContent" @click="rightContent = !rightContent" style="margin-left: 16px;" v-if="!rightContent">
              <i scope="icon" :class="rightContent?'el-icon-caret-right':'el-icon-caret-left'"></i>
            </el-button>
            <!-- 搜索框-->

            <div class="left-btn">
              <div class="right_row">
                <!-- 添加  组件 -->
                <!-- {{superiorListOption}} -->
                <!-- :key="superiorListOptionKey" -->
                <addComponent class="buttonhurdle" :diaDataAdd="searchData" v-if="but_add" :superiorListOption='superiorListOption' :optionsZi='optionsZi' :haveParentFlag="haveParentFlag" @createdAddDo='createdAddDo' @toAdd="toAdd"></addComponent>
                <!-- @toDelete="toDelete" -->
                <!--添加和批量删除组件-->
                <!-- <buttonhurdle
                  class="buttonhurdle"
                  :diaDataAdd="searchData"
                  @toAdd="toAdd"
                  @toDelete="toDelete"
                ></buttonhurdle> -->
                <!-- 导出 -->
                <exportXlsxOneDlag class="exportX" />
                <!-- 批量绑定水表 -->
                <!-- <el-button type="primary" plain size="mini" style="margin-left:10px">批量绑定水表</el-button> -->
              </div>
            </div>
            <!-- {{dataAttribute[1]}} -->
            <div class="out">

              <dictionaries :searchData="searchData" :modelType="modelType" @optionData="dictionariesCallBack"></dictionaries>
              <!--数据列表-->
              <!-- <div>{{dataAttribute}}</div> -->
              <el-table height='540px' ref="multipleTable" :data="dataAttribute" v-loading.body="loading" row-key="id" border fit highlight-current-row size="mini" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :cell-style="{padding:'5px 0'}" @selection-change="handleSelectionChange" @row-click='rowClickType'>
                <!-- <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="55"></el-table-column> -->
                <el-table-column label="序号" align="center" :show-overflow-tooltip="true" type="index" width="50">
                </el-table-column>
                <!-- el-icon-folder   el-icon-folder-opened -->
                <el-table-column prop="item.EN" align="center" v-for="item in searchData" v-if="item.tableSign" :key="item.id" :label="item.CN" :show-overflow-tooltip="true">
                  <template slot-scope="scope">{{item.type === 'select' ? optionDatas(item.typeGroupCode?optionsZi[item.EN]:searchOptionTable[item.EN],scope.row[item.EN]):scope.row[item.EN]}}</template>
                  <!-- <template slot-scope="scope">{{scope.row[item.EN]}}</template> -->
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <!-- 修改组件 -->
                    <el-tooltip class="item" effect="dark" content="修改" placement="bottom-start">
                      <el-button style="color:#0B9AC3;border:none;" icon="el-icon-edit" circle @click="modificationiClick(scope.row)"></el-button>
                    </el-tooltip>

                    <!-- <modificationi class="inline_block" :attributeOrder="searchData" :modData="scope.row" v-if="but_edit" :optionsZi='optionsZi' :superiorListOption="superiorListOption" @modifyData="modifyData"></modificationi> -->
                    <!-- 删除按钮 -->
                    <el-button style="color:#C90010;border:none;" icon="el-icon-delete" v-if="but_del" circle @click="deleteListComminity(scope.row.id)"></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-main>
        </el-container>

      </el-col>
      <!-- 右边表格 -->
      <el-col :span="rightContent?11:0" class="rightContent">
        <!-- <el-col :span="rightContent?11:0" class="rightContent" v-if="rightContent"> -->
        <el-container>
          <el-header>

            <span class="el-title">{{rightTitle}}</span>
            <!-- 右侧按钮 -->
          </el-header>
          <el-main>

            <!-- 搜索框-->
            <div class="left-btn" v-show="rightTitle">
              <!-- <searchComponents :searchData="searchData" @searchCallBack="searchCallBack"></searchComponents> -->
              <div class="right_row">
                <batches v-show="rightTitle" v-if="but_bd" @toDelete="toDelete"></batches>
                <!-- 添加绑定 -->
                <el-button v-show="rightTitle" type="primary" plain size="mini" v-if="but_bd" @click="addBindings" style="margin-left:10px;">添加绑定</el-button>
              </div>
              <el-button type="primary" v-show="rightContent" class="rightIcon" @click="rightContent = !rightContent" style="margin-left: 16px;">
                <i scope="icon" :class="rightContent?'el-icon-caret-right':'el-icon-caret-left'"></i>
              </el-button>
            </div>
            <div class="out" v-show="rightTitle">
              <!--      <div v-show="(switchForLa.draggable||switchForLa.resizable)">{{testLayout[0].i}}</div>-->
              <!--数据列表-->
              <!-- <div>{{dataAttribute}}</div> -->
              <el-table ref="multipleTable" :data="waterDataAttribute" v-loading.body="rightloading" row-key="id" border fit highlight-current-row size="mini" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :cell-style="{padding:'5px 0'}" @selection-change="handleSelectionChangeRight">
                <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="55">
                </el-table-column>
                <el-table-column prop="item.EN" align="center" v-for="item in searchAreasData" v-if="item.tableSign" :key="item.id" :label="item.CN" :show-overflow-tooltip="true">
                  <template slot-scope="scope">{{scope.row[item.EN]}}</template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <!-- 删除解除绑定按钮 -->
                    <el-button style="color:#C90010;border:none;" v-if="but_bd" icon="el-icon-delete" @click="deleteList(scope.row.id)" circle></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagetotal"></el-pagination>
            </div>
          </el-main>
        </el-container>
        <!-- <el-container></el-container> -->
      </el-col>
    </el-row>
    <!-- 添加绑定弹窗 -->
    <el-dialog title="表卡绑定列表" :visible.sync="addData.dialogVisibleAdd" width="1300px" height='900px' :before-close="handleClose" style="padding:0">
      <add-bind ref="addBindinged" :searchOptionTable='searchOptionTable' @addMessage='addMessage' @closeMessage='closeMessage'></add-bind>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toAddbinding" size="mini">绑 定</el-button>
        <el-button @click="addData.dialogVisibleAdd = false" size="mini">取 消</el-button>
      </span> -->
    </el-dialog>
    <div v-show="isModificationi">

      <modificationi ref="modificationi" class="inline_block" :attributeOrder="searchData" :modData="modificationiData" v-if="but_edit" :optionsZi='optionsZi' :superiorListOption="superiorListOption" @modifyData="modifyData"></modificationi>
    </div>

  </div>
</template>
<script>
//引入组件
import {
  buttonhurdle,
  SearchCForL,
  searchComponents,
  examine,
  dictionaries,
  searchComponentsCss,
  rightButtons
} from '@/views/components/FLPage'
import exportXlsxOneDlag from './components/exportXlsxOneDlag'
// 引入弹窗组件
import addBind from './components/add-bind.vue'
import batches from './components/batches.vue'
import modificationi from './components/modificationi'
import addComponent from './components/addComponent'
import {
  addFlCommunity, //增加---小区管理新增
  deleteFlCommunity, //删除----小区管理删除
  // searchFlCommunity, //分页查询
  modifyFlCommunity, //修改------小区管理编辑
  getFlCommunity, //根据ID获取-----？？？？
  exprotXls, //导出----导出小区管理Xlsx
  getTree, //区域树--小区资料全部
  findWaterMeterByCommunityCode, //获得小区下绑定的水表
  findUnbindingWaterMeter, //获取未绑定小区的水表
  removeBinding, //解除小区绑定的水表
  binding, //小区和水表绑定
} from '@/api/baseManage/flScheduleCommunity/index'
export default {
  components: {
    SearchCForL,
    searchComponents,
    buttonhurdle,
    modificationi,
    examine,
    dictionaries,
    batches,
    // exportXlsxs,
    addBind,
    addComponent,
    exportXlsxOneDlag,
    searchComponentsCss,
    rightButtons
  },
  data () {
    return {
      haveParentFlag: "",
      modificationiData: {},
      isModificationi: false,
      but_bd: false,
      but_add: false,
      but_edit: false,
      but_del: false,
      loading: false,
      rightloading: false,
      // 右边板块标题
      rightTitle: '',
      modelType: 'table',
      // 添加数据
      addData: {
        // 弹窗控制
        dialogVisibleAdd: false,
      },
      //   收缩框开关
      shrinkBoxOpenClose: false,
      // drawer框的显示控制
      drawer: false,
      //搜索框
      suoS: {},
      //区域组织搜索数据
      searchRegionalData: [
        {
          EN: 'name',
          CN: '区域名称',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{2,20}$',
          err: '·长度为2-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
      ],
      //   搜索组件的数据
      searchData: [
        {
          EN: 'id',
          CN: '',
          value: '',
          type: 'input',
          option: [],
          Exp: '',
          err: '',
          result: true,
          sign: false,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: 'name',
          CN: '名称',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{2,20}$',
          err: '·长度为2-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'code',
          CN: '区域编码',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: false,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: 'pid',
          CN: '父级id',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: 'level',
          CN: '级别',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: false,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: 'address',
          CN: '地址',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: false,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: 'parentId',
          CN: '上级',
          value: '',
          type: 'select',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          skipSign: true,
        },
        {
          EN: 'superior',
          CN: '上级2',
          value: '',
          type: 'select',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
          skipSign: true,
        },
        {
          EN: 'codeFactory',
          CN: '水表品牌',
          value: '',
          type: 'select',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          dictTable: {
            table: 'fl_factory',
            id: 'id',
            name: 'name',
            associated: 'status%3D1',
          },
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
          configurationSign: false,
        },
        {
          EN: 'book',
          CN: '手册',
          value: '',
          type: 'select',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          dictTable: {
            table: 'fl_book',
            id: 'id',
            name: 'name',
          },
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
          configurationSign: false,
        },
      ],
      // 具体小区的数据
      searchAreasData: [
        {
          EN: 'id',
          CN: '',
          value: '',
          type: 'input',
          option: [],
          Exp: '',
          err: '',
          result: true,
          sign: false,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: 'name',
          CN: '水表名',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'waterNo',
          CN: '水表编号',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: false,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: 'setupAddress',
          CN: '安装位置',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
      ],
      //添加弹窗的数据模型
      diaDataAdd: {
        yyqName: '',
        pqName: '',
        pqNum: '',
        BH: '',
      },
      //删除----Start----------------------------------------
      deleteDataList: [],
      //删除----End----------------------------------------

      //查看----Start----------------------------------------
      //查看的弹窗控制器
      DialogVisibleExamine: false,
      //查看的数据
      examineData: {},
      //查看----End----------------------------------------

      //表格数据
      //后端传来的数据
      dataAttribute: [],
      // 具体地址的水表数据
      waterDataAttribute: [],
      //表格选中
      multipleSelection: [],
      // 控制右侧是否显示
      rightContent: false,
      //分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0, //总条数
      // 某地区下水表Code
      WaterMeterDataCode: '',
      superiorListOption: [],
      optionsZi: [],
      searchOptionTable: [],
      superiorListOptionKey: 0,
    }
  },
  computed: {
    optionDatas () {
      return function (arr, val) {
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].value == val) {
              return arr[i].label
            }
          }
        }
      }
    },
  },
  created () {
    this.but_edit = this.$store.state.user.elements['flCommunity:but_edit']
    this.but_del = this.$store.state.user.elements['flCommunity:but_del']
    this.but_add = this.$store.state.user.elements['flCommunity:but_add']
    this.but_bd = this.$store.state.user.elements['flCommunity:but_bd']
    this.loading = true
    //this.forData()
    // this.forWaterData(this.currentPage, this.pagesize, this.WaterMeterDataCode);
  },
  methods: {
    modificationiClick (rowValue) {
      this.isModificationi = this.$refs.modificationi.DialogVisibleMods = true
      this.modificationiData = rowValue
    },
    // 字典组件回调
    dictionariesCallBack ([a = {}, b = {}]) {
      console.log(12366688)
      // 正常字典
      // 删除app抄表  特殊处理
      this.optionsZi = a
      // 跨表字典
      this.searchOptionTable = b
      console.log(a, b, 66688)

      this.forData()
    },
    addBindings () {
      console.log('绑定按钮---')
      this.addData.dialogVisibleAdd = true
      this.$nextTick(() => {
        this.$refs.addBindinged.forData()
      })
      this.forWaterData(
        this.currentPage,
        this.pagesize,
        this.WaterMeterDataCode
      ) //刷新水表列表
    },
    addMessage (res, res1) {
      if (res === '绑定') {
        console.log(this.WaterMeterDataCode, 'jiushizhege ')
        const communityCode = this.WaterMeterDataCode
        var meterIds = []
        res1.forEach((ele) => {
          meterIds.push(ele.id)
        })
        console.log(communityCode, meterIds, 'ce2222shi')
        // 绑定接口
        binding(communityCode, meterIds).then((res) => {
          // 关闭弹窗
          this.addData.dialogVisibleAdd = false
          // 刷新页面
          this.forData()
          this.forWaterData(
            this.currentPage,
            this.pagesize,
            this.WaterMeterDataCode
          ) //刷新水表列表
          // 提示
          // this.message({
          //   message:'绑定成功',
          //   type:'success'
          // })
        })
      }
    },
    closeMessage (res) {
      console.log(res)
      if (res === '取消') {
        // 关闭窗口个
        this.addData.dialogVisibleAdd = false
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => { })
    },
    //搜索
    // sunS_F() {
    //   this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
    // },
    //查询组件回调
    // searchCallBack(newData) {
    //   console.log(newData);
    //   //组装数据（newData是个数组）

    //   let obj={};
    //   for(let i=0;i<newData.length;i++){
    //     obj[newData[i].EN]=newData[i].value;
    //   }
    //   console.log(obj)
    //   this.suoS=obj
    // },
    //渲染数据初始
    // forData(page, size, searchData) {
    //   searchFlCommunity(page, size, searchData).then(response => {
    //     this.pagetotal = response.data.total;
    //     this.dataAttribute = response.data.list;
    //   });
    // },
    // 区域树渲染
    forData () {
      this.loading = true
      console.time('timer')
      getTree().then((res) => {
        console.log(res, 'ceshi')
        this.dataAttribute = res.data
        if (this.dataAttribute) {
          if (this.dataAttribute.length == 1) {
            this.haveParentFlag = 1
          } else { }
        } else {
          this.haveParentFlag = 0
        }
        console.log(this.dataAttribute, 666)
        this.loading = false
        this.searchData[8].option = res.data
        let superiorListOption = res.data
        this.superiorListOption = res.data
        this.recursion(superiorListOption)
        /* this.searchData.forEach((item) => {
          console.log('进来了嘛')
          if (item.EN === 'superior') {
            console.log('进来了嘛-2')

            item.option = res.data
            let superiorListOption = res.data
            this.superiorListOption = res.data

            this.recursion(superiorListOption)
          }
        }) */
        console.timeEnd('timer')
      })
    },
    // 转换
    recursion (data) {
      data.forEach(
        (item) => (
          ((item.value = item.id), (item.label = item.name)),
          item.children &&
          item.children.length > 0 &&
          this.recursion(item.children)
        )
      )
      console.log(data, 55522255)

      this.superiorListOption = data
    },
    // 具体小区的水表数据渲染
    forWaterData (page, size, searchData) {
      debugger;
      this.rightloading = true
      // console.log(searchData+'ceshi');
      findWaterMeterByCommunityCode(page, size, searchData).then((response) => {
        this.pagetotal = response.data.total
        this.waterDataAttribute = response.data.list
        console.log(this.waterDataAttribute)
        debugger;
        this.rightloading = false
        console.log(this.waterDataAttribute)
      })
    },
    // 添加绑定
    // toAddbinding(){
    //   const communityCode = this.WaterMeterDataCode
    //   const meterIds = '子传父 传过来'
    //   binding(communityCode,meterIds).then(res => {
    //     // 关闭弹窗
    //     this.addData.dialogVisibleAdd = false
    //     // 刷新页面
    //     this.forData();
    //   })
    // },

    //添加用户--新增表单组件传来的参数
    toAdd (addData) {
      console.log(addData, 88888555555555)
      let obj = {}
      for (let i = 0; i < addData.length; i++) {
        // parentId
        if (addData[i].EN == 'parentId') {
          addData[i].value = this.changeSuperior(addData[i].value)
        }
        obj[addData[i].EN] = addData[i].value
        console.log(addData, 888888888886666666666)
      }
      console.log(obj)
      addFlCommunity(obj).then((response) => {
        if (response.flag) {
          this.$message({
            message: response.message,
            type: 'success',
          })
        } else {
          this.$message({
            message: response.message,
            type: 'warning',
          })
        }
        // this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
        this.forData() //刷新列表
      })
    },
    createdAddDo (value) {
      if (value == '点击新增') {
        this.superiorListOptionKey = this.superiorListOptionKey + 1
      }
    },
    changeSuperior (superiorList) {
      let superiorListData = ''
      for (let i = 0; i < superiorList.length; i++) {
        let index = superiorList.length - 1
        superiorListData = superiorList[index]
      }
      return superiorListData
    },
    //按钮栏传递了删除命令-----可能不需要   批量解除绑定---------------
    toDelete (orderstring) {
      this.$confirm('确认删除？')
        .then((_) => {
          let idArr = []
          for (let i = 0; i < this.deleteDataList.length; i++) {
            idArr.push(this.deleteDataList[i].id)
          }
          if (idArr.length == 0) {
            // alert("请选择要解绑的数据！");
            this.$message({
              message: '请选择要解绑的数据！',
              type: 'warning',
            })
            return
          }
          removeBinding(idArr)
            .then((response) => {
              this.$message({
                message: response.message,
                type: 'success',
              })
              this.forData() //刷新列表
              this.forWaterData(
                this.currentPage,
                this.pagesize,
                this.WaterMeterDataCode
              ) //刷新水表列表
            })
            .catch((error) => {
              this.$message({
                message: response.message,
                type: 'warning',
              })
            })
        })
        .catch((_) => { })
    },
    // 删除小区
    deleteListComminity (id) {
      console.log(id)
      let arrId = [id]
      var that = this
      this.$confirm('确认删除么？')
        .then((_) => {
          deleteFlCommunity(arrId).then((response) => {
            if (response.flag) {
              this.$message({
                message: response.message,
                type: 'success',
              })
              this.forData() //刷新列表
            } else {
              this.$message({
                message: response.message,
                type: 'warning',
              })
            }
            // console.log(this.waterDataAttribute,'ceshishuaxin');

            this.forWaterData(
              this.currentPage,
              this.pagesize,
              this.WaterMeterDataCode
            ) //刷新水表列表
            // console.log(this.waterDataAttribute,'ceshishuaxin');
            // this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
            // console.log('66666666666');
          })
        })
        .catch((_) => {
          that.$message({
            message: response.message,
            type: 'warning',
          })
        })
    },
    //解除绑定----------
    deleteList (id) {
      console.log(id)
      let arrId = [id]
      var that = this
      this.$confirm('确认解除绑定么？')
        .then((_) => {
          removeBinding(arrId).then((response) => {
            this.forData() //刷新列表
            console.log(this.waterDataAttribute, 'ceshishuaxin')

            this.forWaterData(
              this.currentPage,
              this.pagesize,
              this.WaterMeterDataCode
            ) //刷新水表列表
            console.log(this.waterDataAttribute, 'ceshishuaxin')
            // this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
            console.log('66666666666')

            that.$message({
              message: '成功解除绑定',
              type: 'success',
            })
          })
        })
        .catch((_) => {
          that.$message({
            message: '解除绑定失败',
            type: 'warning',
          })
        })
    },

    changeSuperior (superiorList) {
      let superiorListData = ''
      for (let i = 0; i < superiorList.length; i++) {
        let index = superiorList.length - 1
        superiorListData = superiorList[index]
      }
      return superiorListData
    },
    //修改
    modifyData (value, modData) {
      if (value === true) {
        // let obj2 = {};
        // parentId     处理
        // modData.parentId = this.changeSuperior(modData.parentId)
        if (Array.isArray(modData['parentId'])) {
          let parentId = this.changeSuperior(modData.parentId)
          modData.parentId = parentId
        }
        console.log(modData.parentId, 98555555)
        modifyFlCommunity(modData.id, modData)
          .then((response) => {
            if (response.flag) {
              this.$message({
                message: response.message,
                type: 'success',
              })
              this.forData() //刷新列表
            } else {
              this.$message({
                message: response.message,
                type: 'warning',
              })
            }
            console.log(response)
            this.isModificationi = false

            // this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          })
          .catch((error) => {
            alert('修改失败')
            this.isModificationi = false
          })
      } else {
        this.isModificationi = false
      }
    },

    //表格选中事件
    handleSelectionChange (val) {
      this.multipleSelection = val
      //传递删除的参数
      this.deleteDataList = val
    },
    handleSelectionChangeRight (val) {
      this.multipleSelection = val
      //传递删除的参数
      this.deleteDataList = val
    },
    // 当表格的某一行被点击的时候触发
    rowClickType (row) {
      console.log(row)
      this.WaterMeterDataCode = row.code
      // this.rightContent = true
      console.log(this.WaterMeterDataCode)
      this.rightTitle = row.name
    },
    //配置的子组件通知
    async goFatherComponent (OverData) {
      //1.修改父组件的视图***************
      this.searchData = JSON.parse(JSON.stringify(OverData));
      //2.保存’配置‘的更改
      let obj = {};
      //三个参数都是string类型***********
      obj["userId"] = this.$store.state.user.id; //1
      obj["routerName"] = this.$route.path; ///jiChuZiLiao/flBook
      obj["stringData"] = JSON.stringify(OverData); //相当于this.searchData转成了字符串格式    [{"EN":"id","CN":"主键","value":""...
      //封装好的发请求方法*****************
      let save_check_boxs = await SAVE_CHECK_BOXS(obj);
    },
    //分页
    handleSizeChange (val) {
      console.log('每页 ' + val + ' 条')
      this.pagesize = val
      this.forWaterData(this.currentPage, val, this.WaterMeterDataCode)
    },
    handleCurrentChange (val) {
      console.log('当前页: ' + val)
      this.currentPage = val
      this.forWaterData(val, this.pagesize, this.WaterMeterDataCode)
    },
    // 配置
    configuration (msg) {
      if (msg == '配置') {
        console.log(msg);
      }
    },
    // 重置
    emptySearch (msg) {
      if (msg == '重置') {
        this.suoS = {};
        let suoS = this.suoS
        suoS.communityCode = this.areaCode
        this.forData(this.currentPage, this.pagesize, suoS);
      }
    },
    //搜索
    sunS_F (msg) {
      if (msg == '搜索') {
        this.currentPage = 1;
        this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
      }
    },
    //查询组件回调
    searchCallBack (newData) {
      let obj = {};
      for (let i = 0; i < newData.length; i++) {
        obj[newData[i].EN] = newData[i].value;
      }
      this.suoS = obj;
    },
    // 导出Xlsx数据----如果不对   就是重名的原因
    exprotXlsx: exprotXls,
    // 获取未绑定小区的水表
    findUnbindingWaterMeter: findUnbindingWaterMeter,
  },
  watch: {
    WaterMeterDataCode (newValue, oldValue) {
      ; (this.currentPage = 1), (this.pagesize = 10)
      this.forWaterData(this.currentPage, this.pagesize, newValue)
    },
  },
}
</script>
<style scoped src="@/styles/allCss.css"></style>
<style lang="scss" scoped>
/ddep/.el-dialog__body {
  padding: 25px 20px !important;
}
.el-title {
  font-weight: 700;
}
.left-btn {
  display: flex;
  justify-content: space-between;
  padding: 22px 0px 25px;
}
.buttonhurdle {
  padding: 0px !important;
  margin-right: 10px;
}
.leftContent,
.rightContent {
  padding: 0 30px 0 30px;
}
.out {
  padding: 0px 0px;
}
.el-header {
  height: auto !important;
  padding: 0 0px;
}
.el-main {
  padding: 0px;
}
.areaManger {
  padding: 20px 30px 0 30px;
  // background: #f2f3f5;
  /deep/ .el-table--mini {
    .gutter {
      display: table-cell !important;
    }
  }
  .rightIcon {
    float: right;
    height: 30px;
    width: 30px;
    padding: 0;
    margin-right: 0px;
    .el-icon-caret-left {
      display: inline-block;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
    }
  }
  .right_row {
    display: flex;
    justify-content: start;
    align-items: center;
    /deep/.el-button--danger.is-plain {
      margin: 0px !important;
      margin-left: 0 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
  }
  .do {
    display: flex;
  }
  .pagination {
    margin-top: 30px;
  }
  .right_buttons {
    position: absolute;
    right: 30px;
    top: 10px;
  }
}
</style>
